import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import moment from 'moment';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
  name: {
    marginRight: 4,
    fontWeight: 500,
  },
  article: {
    color: theme.palette.primary.main,
    marginLeft: 4,
    fontSize: 15,
    fontWeight: 500,
  },
}));

export default function CommentList(props) {
  const { data } = props;
  const classes = useStyles();

  if (Array.isArray(data)) {
    return (
      <List className={classes.root}>
        {
          data.map((item, index) => (
            <ListItem key={index}>
              <ListItemAvatar>
                <Avatar src={item.avatar ? item.avatar : undefined}>
                  {item.avatar ? undefined : item.user.slice(0, 1)}
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={(
                  <div>
                    <span className={classes.name}>{item.user}</span>
                    评论了你的文章
                    <a className={classes.article}>{item.articleTitle}</a>
                  </div>
                )}
                secondary={(
                  <>
                    {moment(Number(item.time)).format('YYYY-MM-DD HH:ss')}
                    <Typography
                      component="span"
                      variant="body2"
                      className={classes.inline}
                      color="textPrimary"
                    >
                      <p>
                        {item.content}
                      </p>
                    </Typography>

                  </>
                )}
              />
            </ListItem>
          ))
        }

      </List>
    );
  }
  return 'loading...';
}
